<template>
    <div class="header_menu_content">
        <div :class="indexed == index ? 'menu_group_item_ac' : 'menu_group_item'" v-for="(item, index) in menuData"
            :key="index" @click="indexed = index">
            <img :src="require(`@/assets/bigScreen/icons/router-${indexed == index ? item.ac_icon : item.icon}`)"
                alt="">
            <div :class="indexed == index ? 'text_jb_ac' : 'text_jb'">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            indexed: 0,
            menuData: [
                {
                    name: '首页',
                    icon: 'home.png',
                    ac_icon: 'home-ac.png',
                    path: '/home'
                }, {
                    name: '人员中心',
                    icon: 'user.png',
                    ac_icon: 'user-ac.png',
                    path: '/home'
                }, {
                    name: '设备中心',
                    icon: 'book.png',
                    ac_icon: 'book-ac.png',
                    path: '/home'
                }, {
                    name: '监测中心',
                    icon: 'com.png',
                    ac_icon: 'com-ac.png',
                    path: '/home'
                }, {
                    name: '视频中心',
                    icon: 'video.png',
                    ac_icon: 'video-ac.png',
                    path: '/home'
                }, {
                    name: '告警中心',
                    icon: 'ld.png',
                    ac_icon: 'ld-ac.png',
                    path: '/home'
                }, {
                    name: '报表中心',
                    icon: 'chart.png',
                    ac_icon: 'chart-ac.png',
                    path: '/home'
                }, {
                    name: '材料中心',
                    icon: 'chart.png',
                    ac_icon: 'chart-ac.png',
                    path: '/home'
                }
            ]
        };
    },
    methods: {

    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kk';
    src: url('../../../../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'al';
    src: url('../../../../../assets/font/Alibaba-PuHuiTi-Bold_0.ttf');
    font-weight: normal;
    font-style: normal;
}

.header_menu_content {
    width: 56.5%;
    height: 2.6042vw;
    position: absolute;
    left: 22%;
    bottom: 5%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-x: auto;

    .menu_group_item {
        width: 14%;
        height: 100%;
        background-image: url("../../../../../assets/bigScreen/icons/noe-choose.png");
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;

        img {
            width: 1.0417vw;
            margin-left: 15%;
            margin-right: 8%;
        }

        .text_jb {
            font-size: 0.8333vw;
            font-weight: 400;
            letter-spacing: 0.0208vw;
            font-family: kk;
            color: transparent;
            background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
        }

        .text_jb_ac {
            font-size: 0.8333vw;
            font-weight: 400;
            letter-spacing: 0.0208vw;
            font-family: kk;
            color: #fff;

        }
    }

    .menu_group_item_ac {
        width: 14%;
        height: 100%;
        background-image: url("../../../../../assets/bigScreen/icons/choose.png");
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;

        img {
            width: 1.0417vw;
            margin-left: 15%;
            margin-right: 8%;
        }

        .text_jb {
            font-size: 0.8333vw;
            font-weight: 400;
            letter-spacing: 0.0208vw;
            font-family: kk;
            color: transparent;
            background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
        }

        .text_jb_ac {
            font-size: 0.8333vw;
            font-weight: 400;
            letter-spacing: 0.0208vw;
            font-family: kk;
            color: #fff;

        }
    }

    .menu_group_item:hover {
        background-image: url("../../../../../assets/bigScreen/icons/choose.png");
        background-size: cover;

        .text_jb {
            font-size: 0.8333vw;
            font-weight: 400;
            letter-spacing: 0.0208vw;
            font-family: kk;
            color: #fff;
        }
    }

}
</style>